<template>
  <section class="xm-content xm-admin">
    <el-form
      ref="form"
      v-loading="box_loading"
      :model="form"
      :rules="rules"
      size="mini"
      label-width="100px"
      inline-message
    >
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" clearable placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="form.nickName" clearable placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="form.password"
          clearable
          placeholder="请输入密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="1">正常</el-radio>
          <el-radio label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色" prop="roles">
        <el-select v-model="form.roles" placeholder="请选择角色">
          <el-option
            v-for="(item, index) in roleList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="xm-footer">
      <el-button
        type="primary"
        size="mini"
        :loading="btn_loading"
        @click="saves('form')"
        >确 定</el-button
      >
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
    </div>
  </section>
</template>

<script>
import { addUser, editUser, getRoleList, getUser } from '@/api/user'
export default {
  components: {},
  props: {
    layerid: {
      default: 0,
    },
    row: {
      default: {},
    },
  },
  data() {
    return {
      box_loading: false,
      btn_loading: false,
      form: {
        username: '',
        password: '',
        nickName: '',
        status: '1',
        roles: '',
      },
      roleList: [],
      fileInit: [],
      rules: {
        username: [{ required: true, message: '必填', trigger: 'blur' }],
        nickName: [{ required: true, message: '必填', trigger: 'blur' }],
        password: [{ required: false, message: '必填', trigger: 'blur' }],
        avatar: [{ required: true, message: '必填', trigger: 'blur' }],
        status: [{ required: true, message: '必选', trigger: 'change' }],
        roles: [{ required: true, message: '必选', trigger: 'change' }],
      },
    }
  },
  created() {
    if (this.row.id) {
      this.form = JSON.parse(JSON.stringify(this.row))
      this.form.status = this.form.status ? '1' : '0'
      // this.getUser(this.row.id);
    }
    this.getRoleList()
  },
  methods: {
    getUser(id) {
      getUser(id).then((res) => {})
    },
    getRoleList() {
      var obj = {
        page: 1,
        limit: 1000,
      }
      getRoleList(obj).then((res) => {
        this.roleList = res.data.data
      })
    },
    /* 添加、编辑 */
    saves(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          var obj = JSON.parse(JSON.stringify(this.form))
          if (obj.roles) {
            obj.roles = obj.roles.split(',')
          }
          this.btn_loading = true
          let res = ''
          if (obj.id) {
            if (!obj.password) {
              this.$delete(obj, 'password')
            }
            this.$delete(obj, 'roleName')
            res = await editUser(obj)
          } else {
            res = await addUser(obj)
          }
          this.btn_loading = false
          if (res.status && res.status != 200) {
            // this.$message({ message: res.data.message, type: 'error' })
            return false
          }
          Object.assign(this.$data.form, this.$options.data().form)
          this.$layer.close(this.layerid)
          this.$parent.getList()
          this.$message({ message: '操作成功', type: 'success' })
        } else {
          this.$refs[formName].validate()
        }
      })
    },
    close() {
      this.$layer.close(this.layerid)
    },
  },
}
</script>

<style lang="scss" scoped></style>
